<template>
  <div class="chart-container">
    <div class="chart-row">
      <div class="chart" ref="barChart" style="width: 48%; height: 400px;"></div>
      <div class="chart" ref="lineChart" style="width: 48%; height: 400px;"></div>
    </div>
    <div class="chart-row">
      <div class="chart" ref="pieChart" style="width: 48%; height: 400px;"></div>
      <div class="chart" ref="scatterChart" style="width: 48%; height: 400px;"></div>
    </div>
    <div class="chart-row">
      <div class="chart" ref="radarChart" style="width: 48%; height: 400px;"></div>
      <div class="chart" ref="stackedBarChart" style="width: 48%; height: 400px;"></div>
    </div>
  </div>
</template>

<script>
import * as echarts from 'echarts';

export default {
  name: 'ChartPage',
  mounted() {
    this.renderBarChart();
    this.renderLineChart();
    this.renderPieChart();
    this.renderScatterChart();
    this.renderRadarChart();
    this.renderStackedBarChart();
  },
  methods: {
    renderBarChart() {
      const barChart = echarts.init(this.$refs.barChart);
      const option = {
        title: {
          text: '借阅量前五名书籍',
        },
        tooltip: {},
        xAxis: {
          data: ['三国志', '黑悟空传', '红楼梦', '西游记', '葵花宝典'],
        },
        yAxis: {},
        series: [
          {
            name: '借阅量',
            type: 'bar',
            data: [123, 20, 322, 111, 99],
          },
        ],
      };
      barChart.setOption(option);
    },
    renderLineChart() {
      const lineChart = echarts.init(this.$refs.lineChart);
      const option = {
        title: {
          text: '各类别图书数量',
        },
        tooltip: {},
        xAxis: {
          data: ['小说', '科技', '历史', '文学', '艺术', '哲学', '传记', '儿童', '教育'],
        },
        yAxis: {},
        series: [
          {
            name: '数量',
            type: 'line',
            data: [500, 300, 200, 400, 100, 250, 180, 300, 276],
          },
        ],
      };
      lineChart.setOption(option);
    },
    renderPieChart() {
      const pieChart = echarts.init(this.$refs.pieChart);
      const categories = [
        { name: '小说', value: 500 },
        { name: '科技', value: 300 },
        { name: '历史', value: 200 },
        { name: '文学', value: 400 },
        { name: '艺术', value: 100 },
        { name: '哲学', value: 250 },
        { name: '传记', value: 180 },
        { name: '儿童', value: 300 },
        { name: '教育', value: 276 },
      ];

      const option = {
        title: {
          text: '图书类别分布',
          left: 'center',
        },
        tooltip: {
          trigger: 'item',
        },
        series: [
          {
            name: '图书类别',
            type: 'pie',
            radius: '50%',
            data: categories,
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: 'rgba(0, 0, 0, 0.5)',
              },
            },
          },
        ],
      };
      pieChart.setOption(option);
    },
    renderScatterChart() {
      const scatterChart = echarts.init(this.$refs.scatterChart);
      const borrowRecords = [
        [1, 1],
        [1, 1],
        [1, 1],
        [1, 1],
        [1, 1],
        [1, 1],
        [1, 1],
        [1, 1],
        [8, 9],
        [10, 10],
        [10, 10],
        [1, 1],
        [2, 2],
        [13, 13],
        [13, 13],
        [13, 13],
        [9, 9],
        [6, 6],
      ];

      const option = {
        title: {
          text: '借阅时间与还书时间关系',
        },
        tooltip: {
          trigger: 'axis',
          showDelay: 0,
          axisPointer: {
            type: 'cross',
            lineStyle: {
              type: 'dashed',
              width: 1,
            },
          },
        },
        xAxis: {
          type: 'value',
          scale: true,
          axisLabel: {
            formatter: '{value} 天',
          },
        },
        yAxis: {
          type: 'value',
          scale: true,
          axisLabel: {
            formatter: '{value} 天',
          },
        },
        series: [
          {
            name: '借阅与还书',
            type: 'scatter',
            data: borrowRecords,
          },
        ],
      };
      scatterChart.setOption(option);
    },
    renderRadarChart() {
      const radarChart = echarts.init(this.$refs.radarChart);
      const option = {
        title: {
          text: '书籍评价雷达图',
        },
        tooltip: {},
        radar: {
          indicator: [
            { name: '剧情', max: 10 },
            { name: '文笔', max: 10 },
            { name: '深度', max: 10 },
            { name: '人物', max: 10 },
            { name: '推荐指数', max: 10 },
          ],
        },
        series: [
          {
            name: '书籍评价',
            type: 'radar',
            data: [
              {
                value: [8, 7, 6, 9, 8],
                name: '书籍A',
              },
              {
                value: [6, 9, 7, 8, 9],
                name: '书籍B',
              },
            ],
          },
        ],
      };
      radarChart.setOption(option);
    },
    renderStackedBarChart() {
      const stackedBarChart = echarts.init(this.$refs.stackedBarChart);
      const option = {
        title: {
          text: '各类别图书借阅量',
        },
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'shadow',
          },
        },
        legend: {},
        grid: {
          left: '3%',
          right: '4%',
          bottom: '3%',
          containLabel: true,
        },
        xAxis: {
          type: 'value',
        },
        yAxis: {
          type: 'category',
          data: ['小说', '科技', '历史', '文学', '艺术', '哲学', '传记', '儿童', '教育'],
        },
        series: [
          {
            name: '2023',
            type: 'bar',
            stack: 'total',
            label: {
              show: true,
            },
            emphasis: {
              focus: 'series',
            },
            data: [320, 302, 301, 334, 390, 330, 320, 334, 310],
          },
          {
            name: '2024',
            type: 'bar',
            stack: 'total',
            label: {
              show: true,
            },
            emphasis: {
              focus: 'series',
            },
            data: [220, 182, 191, 234, 290, 330, 310, 294, 230],
          },
        ],
      };
      stackedBarChart.setOption(option);
    },
  },
};
</script>

<style scoped>
.chart-container {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.chart-row {
  display: flex;
  justify-content: space-between;
  width: 100%;
  margin: 20px 0;
}
.chart {
  background: #fff;
  padding: 10px;
  border-radius: 8px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
}
</style>
